<!DOCTYPE html>
<html lang="en">

<head>
    <title>渐变特性</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./linear.css" />
</head>

<body>
    <div class="header">
        <span class="reduce img">-</span>
        <span class="add img">+</span>
       <span class="title-big">CSS渐变特性</span>
  </div>
  <div class="layout">
    <div class="contain box1">
        <p class="linear  left">
            <span class="title">特性1: </span>
            <br>每个渐变至少需要指定2个色标color-stop；
            <br>
            <span class="title">特性2:</span>
            <br> 对于任意2个相邻色标之间的颜色变化是：在前一个色标与后一个色标的位置之间，线性地把前一个色标的颜色过渡到后一个色标的颜色；
        </p>
        <p class="right">
            <span class="back">background-image:</span> linear-gradient(to right, red 0%, blue 100%); </p>
    </div>

    <div class="contain box2">
        <p class="linear-four  left">
            <span class="title">特性3:</span>
            <br>对于多个没指定位置的色标，它们的位置分别是：前面最近的有位置的色标的位置 与 后面最近有位置的色标的位置 之间的平分点；</p>
        <p class="right">
            <span class="back">background-image:</span> linear-gradient(to right, red 0%, green, yellow, purple, blue 100%);</p>
    </div>
    <div class="contain box3">
        <p class="linear-four-none  left">
            <span class="title">特性4: </span>
            <br>如果第1个色标没有指定位置，则第1个色标的位置是渐变区域的起始位置；
            <br>
            <span class="title">特性5: </span>
            <br>如果最后1个色标没有指定位置，则最后1个色标的位置是渐变区域的结束位置；</p>
        <p class="  right">
            <span class="back">background-image:</span> linear-gradient(to right,red,green,yellow,purple,blue);</p>
    </div>

    <div class="contain box4">
        <p class="linear-three  left">
            <span class="title">特性6: </span>
            <br>对于非重复渐变，第1个色标位置之前的颜色是第1个色标的颜色；最后一个色标位置之后的颜色是最后一个色标的颜色；</p>
        <p class="  right">
            <span class="back">background-image:</span> linear-gradient(to right, red 25%, green, blue 75%);</p>
    </div>
    <div class="contain box5">
        <p class="linear-repeat  left">
            <span class="title">特性7: </span>
            <br>对于重复渐变，会用渐变区域分别平铺第1个色标之前的区域 和 最后1个色标之后的区域 ，直到填满为止;
        </p>
        <p class="right">
            <span class="back">background-image:</span>
            background-image: repeating-linear-gradient(to right,red 25%,green,blue 50%);
        </p>
    </div>
    <div class="contain box6">
        <p class="linear-zero  left">
            <span class="title">特性8: </span>
            <br> 对于重复渐变，如果渐变渐变区域的长宽为零，则会用最后1个色标的颜色填充整个区域；

        </p>
        <p class=" right">
            <span class="back">background-image:</span> background-image: repeating-linear-gradient(to right,red 50%,green,blue 50%);</p>
    </div>
    <div class="contain box7">
        <p class="linear-small  left">
            <span class="title">特性9: </span>
            <br> 如果前面色标设置的位置大于后面色标设置的位置，则后面色标设置的位置无效，所有比前端色标的位置小的色标，都将用 大于自身位置的前面的色标中位置最大的那个色标的位置 作为自身的位置；

        </p>
        <p class="  right">
            <span class="back">background-image:</span>background-image: linear-gradient(to right,red 50%,blue 25%);</p>
    </div>
    </div>
<script src="./linear.js"></script>
</body>

</html>